<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../Template/AdminTemplate.xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui">

    

    <ui:define name="content">                                    
            <f:view>
                <h:form id="form" enctype="multipart/form-data">
                    <p:fieldset legend="User Manager">                    
                        <p:dataTable id="user" value="#{userControl.allUser}" var="item" paginator="true" rows="5" tableStyle="width:auto" widgetVar="carsTable" emptyMessage="No Event found with given criteria">                                                              
                        <f:facet name="header">                            
                            <p:outputPanel>                                
                                <h:outputText value="Search all fields:" />  
                                <p:inputText id="globalFilter" onkeyup="carsTable.filter()" style="width:150px" />  
                            </p:outputPanel>  
                        </f:facet>
                        <p:column headerText="Avata">                                
                            <a href="#"><img src="#{item.avatar}" height="100" width="70" /> </a>
                        </p:column>
                            
                        <p:column filterBy="#{item.userName}" sortBy="#{item.userName}" headerText="UserName" footerText="contains" filterMatchMode="contains" >               
                            <h:outputText value="#{item.userName}"/>
                        </p:column>
                            
                        <p:column filterBy="#{userControl.convertSex(item)}"  sortBy="#{userControl.convertSex(item)}" headerText="Gender" footerText="Exact" filterOptions="#{userControl.sexoption()}" filterMatchMode="exact">                                
                                <h:outputText value="#{userControl.convertSex(item)}"/>
                        </p:column>
                            
                        <p:column headerText="FullName">                                
                            <h:outputText value="#{item.fullName}"/>
                        </p:column>
                            
                        <p:column headerText="Birthday">                                
                            <h:outputText value="#{item.birthday}">
                                <f:convertDateTime pattern="MM/dd/yyyy" />
                            </h:outputText>
                        </p:column>
                            
                        <p:column filterBy="#{item.phone}" sortBy="#{item.phone}" headerText="Phone Number" footerText="contains" filterMatchMode="contains" >                                
                            <h:outputText value="#{item.phone}"/>
                        </p:column>
                            
                        <p:column headerText="Address">                                
                            <h:outputText value="#{item.address}"/>
                        </p:column>
                            
                        <p:column headerText="Email">                                
                            <h:outputText value="#{item.email}"/>
                        </p:column>
                            
                        <p:column filterBy="#{item.departmentName}" sortBy="#{item.departmentName}" headerText="Department" footerText="Exact" filterOptions="#{userControl.createFilterOptions()}" filterMatchMode="exact">                                
                            <h:outputText value="#{item.departmentName}"/>
                        </p:column>
                        
                        <p:column headerText="VIEW">  
                            <p:commandButton id="selectButton" update=":form:display" oncomplete="carDialog.show()" icon="ui-icon-search" title="View">  
                                <f:setPropertyActionListener value="#{item}" target="#{userControl.selectedtuser}" />  
                            </p:commandButton>  
                        </p:column>
                            
                        <p:column headerText="Update">
                            <p:commandButton style="font-size: 11px;" value="Update" action="#{userControl.showDetail(userControl.selectedtuser)}" icon="ui-icon-arrowrefresh-1-w" >  
                                <f:setPropertyActionListener value="#{item}" target="#{userControl.selectedtuser}" />
                            </p:commandButton>
                        </p:column>
                            
                        <p:column headerText="Delete">
                            <p:commandButton style="font-size: 11px;" value="Delete"  onclick="confirmation.show()" icon="ui-icon-close" >
                                <f:setPropertyActionListener value="#{item}" target="#{userControl.selectedtuser}" />
                            </p:commandButton>
                            <p:confirmDialog id="confirmDialog" message="Are you sure about delete this User?"  
                                             header="Initiating destroy process" severity="alert" widgetVar="confirmation">
                                <p:commandButton id="confirm" style="font-size: 11px;" actionListener="#{userControl.delete(userControl.selectedtuser)}" value="Yes Sure" oncomplete="confirmation.hide()"/>
                                  <p:commandButton id="decline" style="font-size: 11px;" value="Not Yet" onclick="confirmation.hide()" />   
                            </p:confirmDialog>
                        </p:column>
                            
                    </p:dataTable>
                    </p:fieldset>                   
                    <p:dialog header="Car Detail" widgetVar="carDialog" resizable="false"  
                              width="350" showEffect="clip" hideEffect="fold" id="dialog" >  
                        <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">  

                            <f:facet name="header">    <a href="#"><img src="#{userControl.selectedtuser.avatar}" height="100" width="70" /></a> <p:graphicImage value="./resources/image/#{userControl.selectedtuser.avatar}"/> 
                            </f:facet>  
                          
                            <h:outputText value="UserName:" />  
                            <h:outputText value="#{userControl.selectedtuser.userName}" style="font-weight:bold"/>  

                            <h:outputText value="Password"/>
                            <h:outputText value="#{userControl.selectedtuser.passWord}" style="font-weight:bold"/>
                            
                            <h:outputText value="FullName" />  
                            <h:outputText value="#{userControl.selectedtuser.fullName}" style="font-weight:bold"/>  

                            <h:outputText value="Gender:" />  
                            <h:outputText value="#{userControl.convertSex(userControl.selectedtuser)}"/>

                            <h:outputText value="Phone:" />  
                            <h:outputText value="#{userControl.selectedtuser.phone}" style="font-weight:bold"/>  

                            <h:outputText value="Email:" />  
                            <h:outputText value="#{userControl.selectedtuser.email}" style="font-weight:bold"/>

                            <h:outputText value="Address:" />  
                            <h:outputText value="#{userControl.selectedtuser.address}" style="font-weight:bold"/>

                            <h:outputText value="Birthday:" />  
                            <h:outputText value="#{userControl.selectedtuser.birthday}" style="font-weight:bold"/>

                            <h:outputText value="DepartmentName:" />  
                            <h:outputText value="#{userControl.selectedtuser.departmentName}" style="font-weight:bold"/>

                            <h:outputText value="Is Admin"/>
                            <h:outputText value="#{userControl.selectedtuser.isAdmin}" style="font-weight: bold"/>
                            
                            <h:outputText value="Is Active"/>
                            <h:outputText value="#{userControl.selectedtuser.isActive}" style="font-weight: bold"/>

                        </h:panelGrid>    
                    </p:dialog>
                </h:form>
            </f:view>        
    </ui:define>



</ui:composition>
